<template>
  <div class="editable-cell">
    <div v-if="editable" class="editable-cell-input-wrapper">
      <!-- <a-input :value="value" @change="handleChange" @pressEnter="check" /><a-icon
            type="check"
            class="editable-cell-icon-check"
            @click="check"
          /> -->
      <a-cascader :options="list" :default-value="[type]" :allowClear="false" :field-names="{ label: 'Title', value: 'ID', children: 'Childrens' }" @change="check" placeholder="请选择" />

      <!-- <a-select allowClear v-model="type" @change="check">
            <a-select-option v-for="(it, index) in list" :key="index" :value="it.ID">
              {{ it.Title }}</a-select-option>
          </a-select> -->
    </div>
    <div v-else class="editable-cell-text-wrapper">
      {{ value || ' ' }}
      <a-icon type="edit" class="editable-cell-icon" @click="edit" v-if="roleId == 1 || roleId == 52"/>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { authDevice } from '@/utils/mixin'
// import { mapActions, mapGetters } from 'vuex'

export default {
  props: {
    list: Array,
    text: String,
    type: Number,
  },
  mixins: [authDevice],
  data () {
    return {
      value: this.text,
      editable: false,
      roleId: window.localStorage.getItem('RoleID')
      //   projectTypeOptions: [],
    }
  },
  async created () {
    // const res = await getDicList({ categoryId: 2069 })
    // this.projectTypeOptions = res
  },
  computed: {
    // ...mapGetters(['roleId']),
  },
  methods: {
    handleChange (e) {
      const value = e.target.value
      this.value = value
    },
    check (v) {
      this.editable = false
      this.$emit('change', v && v.length > 1 ? v[1] : v[0])
    },
    edit () {
      // if (isEditProject()) {

        this.editable = true
      // } else {
      //   return
      // }
    },
  },
  watch: {
    text (newValue) {
      this.value = newValue
    }
  }
}
</script>
<style lang="less" scoped></style>
